import QtQuick
import Qt5Compat.GraphicalEffects
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
//    color: "#00000000"
    title: " "

    ScaleImage{
        id: image
        anchors.fill: parent
    }

    //鸟瞰图实现
    Rectangle{

        width: 100
        height: 100
        clip: true
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.margins: 10

        radius: 4
        border.width: 1

        Image {
            id: name
            source: image.source
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit

            Item{
                id: container
                anchors.centerIn: parent
                width: parent.paintedWidth
                height: parent.paintedHeight

                Rectangle{
                    id: rect
                    color: "red"
                    opacity: 0.4
                    radius: 4
                    width: image.width / image.contentWidth * container.width
                    height: image.height / image.contentHeight * container.height
                    x: image.contentX / image.contentWidth * container.width
                    y: image.contentY / image.contentHeight * container.height
                    MouseArea {
                        anchors.fill: parent
                        drag.target: rect
                        drag.axis: Drag.XAndYAxis
                        drag.filterChildren: true
                        drag.minimumX: 0
                        drag.maximumX: container.width - rect.width
                        drag.minimumY: 0
                        drag.maximumY: container.height - rect.height
                        onPositionChanged: {
                            var xRatio = rect.x / container.width;
                            var yRatio = rect.y / container.height;

                            image.contentX = xRatio * image.contentWidth
                            image.contentY = yRatio * image.contentHeight
                        }
                    }
                }
            }
        }




    }


    PropertyDump{
        title: "Root&Flickable"
        target: image
        properties: ["x","y","width","height","contentX","contentY",
            "contentWidth","contentHeight",
            "scaleCenterX","scaleCenterY","imgScale"]
    }


//    Item{
//        anchors.fill: parent
//        Button{
//            text: (checked ? "显示" : "隐藏" )+ rect.visible
//            checkable: true
//            onClicked: checked ? rect.hide() : rect.show()
//        }

//        Rectangle{
//            id: rect
//            property real bottomMargin: 20

//            width: 200
//            height: 40
//            radius: 6
//            color: "red"
//            y: parent.height - height - bottomMargin
//            Behavior on y{
//                NumberAnimation {
//                    easing.type: Easing.InOutCubic //
//                    duration: 200
//                }
//            }

//            anchors.horizontalCenter: parent.horizontalCenter

//            visible: y < parent.height

//            function show(){
//                y = parent.height - height - bottomMargin
//            }

//            function hide(){
//                y = rect.parent.height
//            }
//        }
//    }

}
